{extend name="mainadmin@layouts/base" /}

{block name="main" }
<link href="__STATIC__/main/css/stylesheets/page/goods.css?v=1" rel="stylesheet"/>
<link href="__STATIC__/main/css/stylesheets/uploadify/uploadify.min.css" rel="stylesheet"/>
<header class="header  b-b clearfix">
    <div class="page-breadcrumbs">
        <ul class="breadcrumb">
            <li>
                <i class="fa fa-ellipsis-v"></i>
                <strong>{$row['id']>0?"编辑素材分类":"添加素材分类"}</strong>
            </li>
        </ul>
        <a class="text-muted pull-right m-r-tm m-t-md pointer" data-toggle="back" title="返回"><i class="fa fa-reply"></i></a>
    </div>
</header>
<form class="form-horizontal form-validate form_vbox" method="post" action="{:url('info')}" style="padding:0;">
    <section class="vbox">
        <section class="scrollable  wrapper w-f">
            <section class="panel panel-default">

                <div class="panel-body">
                    <div class="form-group">
                        <label class="control-label">素材分类：</label>
                        <div class="col-sm-7">
                            <select name="cid"  style="width: 180px;" data-toggle="select2">
                                <option value="">选择素材分类</option>
                                {volist name="cate_list" id="vo" }
                                <option value="{$vo.id}" {$row['cid']===$vo.id?'selected':''}>{$vo.name}</option>
                                {/volist}
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label">素材文案：</label>
                        <div class="col-sm-7">
                            <textarea style="width: 450px;height: 130px;" name="content">{$row.content}</textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label">素材类型：</label>
                        <div class="col-sm-10">
                            <label>
                                <input name="type" value="1" class="js_inventory" type="radio" {$row['type']|tplckval='=1','checked',true}>
                                图片
                            </label>
                            <label>
                                <input name="type" value="2" class="js_inventory" type="radio" {$row['type']|tplckval='=2','checked'}>
                                视频
                            </label>
                            <label>
                                <input name="type" value="3" class="js_inventory" type="radio" {$row['type']|tplckval='=3','checked'}>
                                带货视频
                            </label>
                        </div>
                    </div>
                    <div class="form-group sc-image hide">
                        <label class="control-label" >素材图片：</label>
                        <div class="col-sm-10">
                            <div class="js_upload_container">
                                <div class="js_file_upload ">
                                    <button type="button" class="btn btn-default js_new_upload" data-submitname="images" data-count="9" data-uploadpath="{:url('mainAdmin/attachment/imageUpload')}"
                                            data-delpath="{:url('mainAdmin/attachment/removeImage')}" data-data="{ 'id':'{$row.id|intval}' }" style="position: relative; z-index: 1;">上传素材图片</button>
                                    <span class="maroon">*</span>
                                    <span class="help-inline">最多9张 (<small>可拖拽图片调整显示顺序 </small>)</span>
                                </div>
                                <div class="uploadify-queue js_file_upload_queue">
                                </div>
                                <ul class="ipost-list ui-sortable js_fileList" data-required="true">
                                    {volist name="$image_list" id="img" }
                                    <li class="imgbox" data-post-id="0" data-path="{$img}">
                                        <a class="item_new_close item_close" href="javascript:void(0)" data-delpath="{:url('mainAdmin/attachment/removeImg')}"  title="删除" data-path="{$img}" data-post-id="0"></a>
                                        <input value="0" name="images[id][]" type="hidden">
                                        <input value="{$img}" name="images[path][]" type="hidden">
                                        <span class="item_box"><img src="{$img}"></span>
                                    </li>
                                    {/volist}
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="form-group sc-cover hide">
                        <label class="control-label">视频封面：</label>
                        <div class="col-sm-8 js_upload_container">
                            <div class="defUpImgBox" data-toggle="uploaderOne" style="width: 100px">
                                <img  src="{$row.cover|default='__STATIC__/main/img/image.png'}">
                                <input  type="hidden"  name="cover"  value="{$row.cover}">
                                <div class="tips">点击上传</div>
                            </div>
                            <span style="color:red;margin-top:5px;">视频封面不传则默认选取视频第一帧作为封面图片</span>
                        </div>
                    </div>
                    <div class="form-group sc-video hide">
                        <label class=" control-label" >上传视频：</label>
                        <div class="col-sm-10">
                            <div class="js_upload_container">
                                <input type="text" name="video" class="input-max hide" value="{$row.video}"/>
                                <button type="button" class="btn btn-default js_file_upload" data-file_type="video" data-uploadpath="{:url('mainAdmin/attachment/uploadVideo')}" style="position: relative; z-index: 1;">点击上传视频
                                </button>
                                <br/>
                                <span style="color:red;margin-top:5px;">只支持上传mp4</span>
                            </div>
                            {if condition="$row.video"}
                            <div style="margin-top: 10px;">
                                <video width="320" height="200" controls>
                                    <source src="{$row.video}" type="video/mp4">
                                </video>
                            </div>

                            {/if}
                        </div>
                    </div>
                    <div class="form-group m-t sc-goods hide">
                        <label class=" control-label">关联商品：</label>
                        <div class="controls" style="display: flex">
                            <div class="goods-list" style="display: flex"  data-toggle="ajaxModal" data-remote="{:url('sys_admin.index/selectGoods',array('type'=>1,'page_size' => 10))}">
                                {if condition="$row.goods_id"}
                                <div class="img">
                                    <input type="hidden" name="goods_id" value="{$row.goods_id}">
                                    <img src="{$row.goods_img}" style="width: 80px;height: 80px;">
                                    <!--                                    <span class="del" onclick="del(this)">删除</span>-->
                                </div>
                                {/if}
                            </div>
                            {if condition="$row.goods_id == 0"}
                            <div class="vselect" data-toggle="ajaxModal" data-remote="{:url('sys_admin.index/selectGoods',array('type'=>1,'page_size' => 10))}">
                                <span>+</span>
                            </div>
                            {/if}
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label">所需积分：</label>
                        <div class="col-sm-7">
                            <input type="text" class="input-max" name="price" value="{$row.price}" style="width: 200px;">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label">显示状态：</label>
                        <div class="col-sm-10">
                            <label>
                                <input name="status" value="1" class="js_inventory" type="radio" {$row['status']|tplckval='=1','checked',true}>
                                显示
                            </label>
                            <label>
                                <input name="status" value="0" class="js_inventory" type="radio" {$row['status']|tplckval='=0','checked'}>
                                隐藏
                            </label>
                        </div>
                    </div>
                    <div class="line line-dashed line-lg pull-in"></div>
                </div>
            </section>
        </section>

        <footer class="footer bg-white b-t p-t">
            <div class="form-group">
                <div class="col-sm-4 col-sm-offset-1">
                    <input name="id" type="hidden" value="{$row.id|intval}">
                    <button type="submit" class="btn btn-primary js_save_submit" data-loading-text="保存中...">保存</button>
                    <button type="button" class="btn btn-default" data-toggle="back">取消</button>
                </div>
            </div>
        </footer>
    </section>
</form>
{/block}

{block name="footer"}
<script type="text/javascript">
    seajs.use(["dist/plupload/init.js", "dist/plupload/file.js"])
</script>
<script>
    var ids = new Array();
    function aa(){
        $('input[name="goods_ids"]:checked').each(function(){
            if (ids.indexOf(Number($(this).val())) === -1) {
                ids.push(Number($(this).val()))
                $('.vselect').remove()
                $('.goods-list').html('');
                $('.goods-list').append('<div class="img">\n' +
                    '<input type="hidden" name="goods_id" value="'+$(this).val()+'">\n' +
                    '<img src="'+$(this).data('img')+'" style="width: 80px;height: 80px;">\n' +
                    // '<span class="del" onclick="del(this)">删除</span>\n' +
                    '</div>')
            }
        });
        $('.modal-dialog').remove()
        $('.modal-backdrop').remove()
        $('#ajaxModal').hide()
    }
    $(function(){
        var type = $("input[name='type']:checked").val();
        changeType(type);
        $("input[name='type']").on('change',function(){
            type = $(this).val();
            changeType(type);
        })

        function changeType(type) {
            if(type==1){
                $('.sc-image').removeClass('hide');
            }else{
                $('.sc-image').addClass('hide');
            }
            if(type==2 || type==3){
                $('.sc-video').removeClass('hide');
                $('.sc-cover').removeClass('hide');
            }else{
                $('.sc-video').addClass('hide');
                $('.sc-cover').addClass('hide');
            }
            if(type==3){
                $('.sc-goods').removeClass('hide');
            }else{
                $('.sc-goods').addClass('hide');
            }
        }
    })
</script>
<style>
    .vselect{
        width: 80px;
        height: 80px;
        border: 1px dotted #999999;
        text-align: center;
        line-height: 74px;
        cursor: pointer;
    }
    .vselect span{
        font-size: 38px;
        color: #e1e1e1;
    }
    .goods-list{

    }
    .goods-list .img{
        margin-right: 10px;
        position: relative;
    }
    .goods-list .del{
        position: absolute;
        bottom: 0;
        left: 0px;
        background: rgba(0, 0, 0, 0.5);
        color: #FFF;
        width: 100%;
        text-align: center;
        font-size: 12px;
        padding: 2px 0;
        cursor: pointer;
    }
    .goods-lists .img{
        margin-right: 10px;
        position: relative;
    }
    .goods-lists .del{
        position: absolute;
        bottom: 0;
        left: 0px;
        background: rgba(0, 0, 0, 0.5);
        color: #FFF;
        width: 100%;
        text-align: center;
        font-size: 12px;
        padding: 2px 0;
        cursor: pointer;
    }
</style>
{/block}
